<template>
  <screen-adapter>
    <div class="top">
      <span class="jianbian"  style="font-size: 50px; letter-spacing:10px; font-family: Microsoft YaHei;font-weight: 700;
">销售大数据分析</span>
    </div>
    <div class="viewport">
      <div class="column public" style="margin-top: 60px;">
        <!-- 销售记录总价 -->
        <div style="flex: 1; margin-bottom: 20px; ">
          <total-price style=""></total-price>
        </div>
        <!-- 折线 -->
        <div style="flex: 1;">
          <broken-line></broken-line>
        </div>
      </div>
      <div class="column public" style="margin-top: 60px;">
        <!-- 北京地图 -->
        <div style="flex: 3;">
          <bei-jing></bei-jing>
        </div>
        <!-- 饼图 -->
        <div style="flex: 1;">
          <pie-chart></pie-chart>
        </div>
      </div>
      <div class="column public" style="margin-top: 60px; margin-right: 10px;">
        <!-- 柱状图 -->
        <div style="flex: 1; margin-bottom: 20px; ">
          <cy-linder></cy-linder>
        </div>
        <!-- 销售热榜 -->
        <div style="flex: 1; ">
          <hot-sale></hot-sale>
        </div>
      </div>
    </div>
  </screen-adapter>
</template>

<script>
// import drawMixin from '@/utils/drawMixin' // 自适应缩放
import BeiJing from './views/beijing/bei-jing.vue'
import BrokenLine from '@/views/broken line/broken-line.vue'
import CyLinder from '@/views/cylinder/cy-linder.vue'
import HotSale from '@/views/Hot sale/hot-sale.vue'
import PieChart from '@/views/Pie Chart/pie-chart.vue'
import TotalPrice from '@/views/Total price/total-price.vue'
import ScreenAdapter from '@/components/ScreenAdapter.vue'
// import { log } from 'console'

export default {
  // mixins: [drawMixin],
  data() {
    return {

    }
  },
  mounted() {

  },
  methods: {

  },
  components: {
    BeiJing,
    BrokenLine,
    CyLinder,
    HotSale,
    PieChart,
    TotalPrice,
    ScreenAdapter
  }
}
</script>

<style lang="less" scoped>

// html,
// body,
// #app{
//   height: 100%;
//   width: 100%;
//   margin: 0;
//   padding: 0;
// }
.viewport {
  // max-width: 1920px;
  // min-width: 1024px;
  // margin: 0 auto;
  // min-height: 900px;
  padding:70px  10px 15px 20px;
  background: url(./assets/地图背景图/背景图.png);
  background-size: cover;
  display: flex;
}

.column {
  flex: 3;
  position: relative;
  // background-color: pink;
}

.column:nth-child(2) {
  flex: 5;
  // margin: 20px 10px 0;
}

.public {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.top {
  width: 100%;
  height: 100px;
  position: fixed;
  text-align: center;
  line-height: 90px;
  background-size: 100% 100%;
  background-image: url(./assets/地图背景图/标题.png);

}

// html,
// body,
// 背景平铺
// #app {
//   width: 100%;
//   height: 100%;
//   margin: 0;
//   padding: 0;
//   overflow: hidden;
// }

// .box {
//   width: 100%;
//   height: 100%;
//   background-image: url("./assets/图层\ 22\ 副本.png");
//   background-size: 100% 100%;
//   width: 100%;
//   height: 100%;
//   position: fixed;
//   .tou {
//     display: flex;
//     justify-content: space-between;
//     align-items: center;
//     // .top{
//     //   margin-top: 10px;
//     //   .bottom{
//     //     margin-bottom: 20px;
//     //   }
//     // }

//   }
// }
</style>
